<template>
  <button type="button" class="vcode" @click="RandomCode">获取验证码</button>
</template>

<script>
export default {
  name: "Vcode",
  props: ['ruleForm'],
  data() {
    return {
        vcode: ''
    }
  },
  methods: {
    RandomCode() {
      if (
        !(
          this.ruleForm.oldPass !== "" &&
          this.ruleForm.pass !== "" &&
          this.ruleForm.checkPass !== ""
        )
      ) {
        this.$message({ type: "warning", message: "请输入密码" });
        return false;
      }
      const charactors = "1234567890";
      for (let index = 0; index <= 4; index++) {
        let i = parseInt(10 * Math.random());
        this.vcode += charactors.charAt(i);
      }
      this.$message({ type: "success", message: "验证码：" + this.vcode });
      // 倒计时
      let vcodeText = document.querySelector(".vcode");
      let num = 10;
      vcodeText.disabled = true;
      vcodeText.style.opacity = 0.6;
      vcodeText.innerHTML = "获取验证码(" + num + ")";
      var timer = setInterval(() => {
        num--;
        vcodeText.innerHTML = "获取验证码(" + num + ")";
        if (num === 0) {
          vcodeText.disabled = false;
          vcodeText.style.opacity = 1;
          vcodeText.innerHTML = "获取验证码";
          this.vcode = "";
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.vcode {
  border: none;
}
</style>